<template>
  <div id="plannedInventory">
    <div class="plannedInventoryFrom">
      <span class="plannedInventoryFromTitle">施工单位：</span>
      <el-select
        v-model="plannedInventoryObj.applyOrgId"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <span class="plannedInventoryFromTitle">日期：</span>
      <el-date-picker
        v-model="plannedInventoryObj.date"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </div>
    <div class="plannedInventoryBtn flex">
      <!-- <div><el-button type="primary" icon="el-icon-plus">新增</el-button></div> -->
      <div>
        <el-button
          type="primary"
          @click="serch()"
          >查询</el-button
        >
        <el-button @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="plannedInventoryTable">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        header-row-class-name="formTable"
        height="620"
      >
        <el-table-column
          align="center"
          prop="workDate"
          label="施工日期"
          width="150"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="applyOrgName"
          label="申请单位"
          width="250"
        >
          <!-- <template slot-scope="scope">
            <span style="color: #fcca00"> {{ scope.row.applyOrgName }}</span>
          </template> -->
        </el-table-column>
        <el-table-column
          align="center"
          prop="applyUserId"
          label="申请人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="applyTime"
          label="申请时间"
          width="180"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="approveStatusName"
          label="状态"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.approveStatus == 99"
              style="color: red"
            >
              {{ scope.row.approveStatusName }}</span
            >
            <span
              v-else
              style="color: #409eff"
            >
              {{ scope.row.approveStatusName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="translate"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="sendKey(2, scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="scope.row.canClickPass == 1"
              type="text"
              @click="submitForm(scope.row.id)"
              >请点审批</el-button
            >
            <el-button
              v-if="scope.row.canWriteOff == 1"
              type="text"
              @click="submitForm2(scope.row.id)"
              >销点申请</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="plannedInventoryplannedInventory">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="plannedInventoryObj.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="plannedInventoryObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// planClickPass 请点通过
// planClickWriteOff 计划发起销点
import {
  getplanClickList,
  planClickPass,
  planClickWriteOff,
} from '/src/http/productSchedule/planClick.js'
import { getOrgList } from '/src/http/productSchedule/userMg.js'

export default {
  props: ['getKey'],
  data() {
    return {
      options: [],
      tableData: [],
      plannedInventoryObj: {
        pageNum: 1,
        pageSize: 10,
        applyOrgId: '',
        date: '',
      },
      total: 40,
    }
  },
  components: {},
  created() {},
  mounted() {
    this.initialize()
    this.serch()
  },
  methods: {
    handleSizeChange(val) {
      this.plannedInventoryObj.pageSize = val
      this.serch()
    },
    handleCurrentChange(val) {
      this.plannedInventoryObj.pageNum = val
      this.serch()
    },
    sendKey(num, id) {
      this.getKey(num, id)
    },
    async initialize() {
      try {
        this.options = await getOrgList().then((res) => {
          return res.data
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
    async serch() {
      try {
        this.tableData = await getplanClickList({
          pageNum: this.plannedInventoryObj.pageNum,
          pageSize: this.plannedInventoryObj.pageSize,
          applyOrgId: this.plannedInventoryObj.applyOrgId,
          date: this.plannedInventoryObj.date,
        }).then((res) => {
          this.total = res.data.total
          return res.data.records
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
    async submitForm(id) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      await this.$confirm('确定请点审批吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          try {
            planClickPass({ id: id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '审批成功!',
                })

                this.serch()
              }
            })
          } catch (error) {
            console.log('接口调用出错::: ', error)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    async submitForm2(id) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      await this.$confirm('确定销点申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          try {
            planClickWriteOff({ id: id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '申请成功!',
                })
                this.serch()
              }
            })
          } catch (error) {
            console.log('接口调用出错::: ', error)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    reset() {
      this.plannedInventoryObj = {
        pageNum: 1,
        pageSize: 10,
        applyOrgId: '',
        date: '',
      }
      this.serch()
    },
  },
}
</script>

<style lang="less" scoped>
#plannedInventory {
  .plannedInventoryFrom {
    margin-left: 3rem;
  }
  .plannedInventoryFromTitle {
    font-size: 14px;
    padding: 0 1rem;
    font-weight: 600;
  }
  .plannedInventoryBtn {
    margin: 1rem 4rem;
    float: right;
  }
  .plannedInventoryTable {
    width: 95%;
    margin: 0 auto;
  }
  .plannedInventoryplannedInventory {
    position: absolute;
    bottom: 1rem;
    right: 5rem;
  }
}
</style>
<style lang="less"></style>
